<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>裁判文书 - 人民法院信息网</title>
</head>
<style>
   body{background-position:0 0px;font-family:"Microsoft YaHei",Arial,"";font-size:14px;color:#2f2f2f;overflow-x:hidden;margin:0; padding:0;}
     ul,.li{list-style:none;} 
     a{text-decoration:none;color:#2f2f2f;}
     a:hover{color:#e4393c;}
    /*logo*/
    .img{width:1422px;height: 58px;}
  
  body a img{border:0;}
  .language{position:absolute;right:-50px;top:140px;color: #E4393C;width:200px;height:20px;overflow: hidden;}
    .language a {font-weight: 700;color: #E4393C;}
    /*菜单*/
    #header{height:54px;overflow:hidden;margin: 0 auto;}
    #nav{background:#e4393c;height:47px;}
    #container{width:800px;height:61px;position: absolute;left:300px;top:160px;overflow:hidden;}
    #container ul{background-color:#fff;text-align:center;}
    #container li{display:inline;border-right:1px solid #e2e2e2;font-size:16px;font-weight:bold;line-height:47px}
    #container a{color:#000;text-decoration:none;padding:5px 13px;}
    #container ul li a:hover{color:#e4393c;text-decoration:underline;font-weight:none;}
    #container .last li{border-right:none;}
    /*内容*/
    #grey{background:#eeeeee;width: 100%;height:900px;}
    #tit{position:absolute;left:125px;width:1050px;height:50px;margin-top:20px;margin-left:35px;background:#ffffff;}
    #tit h1{font-size:15px;margin-left:20px;}
    #white{position:absolute;left:0px;width:1050px;height:800px;margin-top:30px;background:#ffffff;}
    /*搜索*/
    #cpsearch {width:1000px;border: 1px solid #E5E5E5;height:80px; margin-bottom:20px;background: #fff8dc;margin-left:20px;}
    #cpsearch .box1 {margin: 15px 0 0 15px;padding-bottom: 20px;}
    #cpsearch .box1 b{ line-height:3.0;margin-left:120px;margin-right: 80px;}
    #cpsearch .box1 input {border: 1px solid #ccc6b0;line-height:25px;height:28px; margin-right:15px;width: 220px;}
    #cpsearch .box1 input.button { background-image:none;background-color:#e4393c; color:#FFF; font-size:16px; font-family:"微软雅黑"; padding:0 30px; height:30px; border:none; cursor:pointer;margin-left: 60px;width: 130px;}
    /*列表*/
    #xxx{float:left;width:1000px;height:270px;margin-left:2px;margin-top: 25px;}
    #xxx .yyy{width:910px;height:38px;margin-bottom:10px;display:block;line-height:38px;border-bottom:2px solid #E4393C;margin-left: 45px;margin-top: 15px;margin-bottom: 15px;}
    #xxx .yyy a{color:#E4393C;font-size:22px;margin-left:10px;}
    #xxx .list{width:1000px;border: 1px solid #ccc6b0;zoom: 1;overflow: auto;margin-left:20px;}
    #xxx .list li{height:30px;line-height:30px;overflow:hidden;list-style: none;margin-left:5px;margin-top: 10px;}
    #xxx .list .l {float:left; width:700px;}
    #xxx .list .r {float:right; width:90px;}
    #xxx .list .l li { font-size:12px;}
    #xxx .list .l li.list_tit { font-size:17px; line-height:1.8;text-indent:20px;background: url(images/w.png) no-repeat 0 5px; margin-bottom:10px;margin-top:10px;width: 650px; border-bottom: none;}
    #xxx .list .l li.list_tit a{color:#272822;text-decoration: none;}
    #xxx .list .l li.list_tit a:hover{color:#E4393c;}
    #xxx .list .l li .ah { float:left; margin:0 30px 15px 0;color:#999;}
    #xxx .list .l li .date { float:left; color:#999;}
    /*分页*/
    #page {width:980px;}
    #yw1{float:right;}
    #page li{float:left;height:46px;line-height:46px;border-bottom:none;overflow:hidden;margin-left: 30px;}
    #page li a{float:none;background:none; display:block; text-indent:inherit;font-size: 16px;}

    
    /*结尾版权等*/
    #links{background:#e4393c;height:40px;line-height:40px;margin:0 auto 0 auto;color:#fff;overflow:hidden;text-align:center;width:100%;}
    #links font{padding:0 20px;}
    #links a{font-weight:bold;color:#fff;font-family:"Hiragino Sans GB","Microsoft Yahei";}
    #ft font{padding:0 10px;}
    #contact{height:100px;text-align:center;padding-top:2px;}
    #contact span{padding:0 10px;height:80px;line-height:40px;}
    #contact li{line-height:30px;overflow:hidden;}
</style>
<body>
<div >
    <img src="images/top1.png" alt="">
  <img src="images/top2.png" alt="">
</div>
<!--菜单开始-->
<div id="header">
  <div id="nav">
    <div id="container">
     <ul>
       <li><a href="court.html">首页</a></li>
       <li><a href="zixun.html">法律法规</a></li>
       <li><a href="notice.html">庭审公告</a></li>
       <li><a href="cp.html">裁判文书</a></li>
       <li><a href="sus.html">诉讼文书</a></li>
       <li><a href="zhibo.html">庭审直播</a></li>
       <li class="last"><a href="about.html">关于我们</a></li>
      </ul>     
    </div>
  </div>
</div>
<div id="grey">
  <div id="tit">
   <h1>所在位置: &nbsp;> &nbsp;裁判文书<h1>
  
<div id="white">
<div id="xxx">

  <div id="cpsearch">
    <div class="box1">
      <form name="content" action="/cp.html" method="get">  
      <b>文书检索：</b>                  
      关键词：<input type="text" name="keyword" id="keyword" v-model="keyword" /><input type="submit" id="" value="搜　索" class="button" @click="search"/>
      </form> 
    </div>
  </div>
      <div class="list">
      <div class="yyy"><a href="#">裁判文书</a></div>
      <div class="ws" v-for="cp in cps" >
        <div class="l">
           <ul>
           <li class="list_tit"><a title="cp.cptit" target="_blank" href="#">{{cp.cptit}}</a></li>
           <li><div class="ah">{{cp.cpah}}</div><div class="date">{{cp.cpdate}}</div></li>
           </ul>
        </div>
        <div class="r"><a href="#" @click="down(cp.serialkey,cp.cptit)"><img src="images/pdf.png" width="50" height="60" alt=""/></a></div>
      </div>
      </div>

</div>
  </div>
</div>  
</div>
<!--友情链接开始-->
<div id="links">
  <a href="http://cpc.people.com.cn" target="_blank" title="中国共产党新闻网">中国共产党新闻网</a>
  <font>|</font>
  <a href="http://www.gov.cn" target="_blank" title="中国政府网">中国政府网</a>
  <font>|</font>
  <a href="http://www.npc.gov.cn" target="_blank" title="中国人大网">中国人大网</a>
  <font>|</font>
  <a href="http://www.cppcc.gov.cn" target="_blank" title="中国政协网">中国政协网</a>
  <font>|</font>  
  <a href="http://www.chinacourt.org" target="_blank" title="中国法院网">中国法院网</a>
  <font>|</font>  
  <a href="http://www.spp.gov.cn" target="_blank" title="最高人民检察院">最高人民检察院</a>
</div>
<!--友情链接结束-->
<!--版权开始-->
<div id="ft">
  <ul id="contact">
     <span>地址：北京市东城区东交民巷27号</span>
     <span>邮编：100745</span>
   <span>总机：67550114</span>
   <span>举报电话：67556131</span> 
   <li>中华人民共和国最高人民法院  版权所有</li> 
   <li>京ICP备05023036号</li>  
   <li><a href="#"><img src="images/red.png" alt=""/></a><li>
   </ul>      
</div>
<!--版权结束-->
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.0"></script>
<script type="text/javascript">
  new Vue({
    el: '#grey',
    data() {
      return {
        cps:[],
        keyword: ''
      }
    },
    beforeMount: function() {
      
      this.$http.get(`http://localhost:8080/cp/query`)
      .then(
        res =>{
        let data = res.body;
        if(data.code === '200') {
          let list = data.list;
          list.map((ls)=>{
            ls.cpdate = ls.cpdate.split('T')[0];
          });
          this.cps = list;
        }else {
          alert(data.desc);
        }
      },
      res => {
        alert(`网络异常`);
      });

    },
    methods: {
      search: function(e) {
        e.preventDefault();
        this.$http.get(`http://localhost:8080/cp/search/${this.keyword}`)
        .then(
        res =>{
        let data = res.body;
        if(data.code === '200') {
          let list = data.list;
          if(list) {
            list.map((ls)=>{
            ls.cpdate = ls.cpdate.split('T')[0];
          });
          this.cps = list;
        }else {
          alert('未查询到数据')
        }
        }else {
          alert(data.desc);
        }
      },
      res => {
        alert(`网络异常`);
      });
      },

      down: function(id,tit) {
        this.$http.get(`http://localhost:8080/cp/download/${id}`)
        .then(
          res =>{
            let blob = new Blob([res.body], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
                      let objectUrl = URL.createObjectURL(blob);
                      let a = document.createElement('a');
                      document.body.appendChild(a);
                      a.setAttribute('style', 'display:none');
                      a.setAttribute('href', objectUrl);
                      a.setAttribute('download', tit);
                      a.click();
                      URL.revokeObjectURL(objectUrl);
          },
          res => {
            alert(`网络异常`);
          }
        );
      }

    }

  });

</script>
</html>
